<script setup lang='ts'>
import { ref, onMounted } from "vue"
import LoadingPage from "@/components/LoadingPage.vue"
import LoadingView from "@/components/LoadingView.vue"
import BookViewFirst from "@/components/BookViewFirst.vue"
import BookViewSecond from "@/components/BookViewSecond.vue"
import BookViewForurth from "@/components/BookViewForurth.vue"
import HumanHotPage from "@/components/HumanHotPage.vue"
import { getBookWomanInfo } from "@/api/index"
import { getBookChapterList } from "@/api/index"
import { useRouter } from 'vue-router'
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
const $router = useRouter()
const isLoading = ref<boolean>(true)
const isLoadingView = ref<boolean>(false)

const bookWomanInfo = ref<any>()

onMounted(async () => {
    let res = await getBookWomanInfo($router.currentRoute.value.query.uuid);
    console.log(res);

    bookWomanInfo.value = res.data.data.list

    isLoading.value = false
})

const toBookContent = async (book: any) => {
    isLoadingView.value = true
    let bookChapterRes = await getBookChapterList(book.id)

    store.getChapter(bookChapterRes.data.data.catalog)
    isLoadingView.value = false
    $router.push({
        path: '/content', query: {
            source_uuid: bookChapterRes.data.data.book.sourceUuid, content_uuid: bookChapterRes.data.data.catalog[0].uuid, title: book.title, index: 0
        }
    })
}
const toShortCutNav = (str: string) => {
    if (str == '人气') {
        $router.push({ path: '/shortCut', query: { url: bookWomanInfo.value[2].more.url, type: '人气', nav: '女生' } })
    } else if (str == '完结') {
        $router.push({ path: '/shortCut', query: { url: bookWomanInfo.value[6].more.url, type: '完结', nav: '女生' } })
    }

}
</script>

<template>
    <div :style="{ height: '100%', width: '100%' }">
        <LoadingView v-if="isLoadingView" />
        <div class="woman">
            <LoadingPage v-if="isLoading" />
            <div class="woman-content" v-else>
                <div class="banner" v-if="bookWomanInfo[0]">
                    <van-swipe :autoplay="3000" lazy-render :indicator-color="'#fff'">
                        <van-swipe-item v-for="image in bookWomanInfo[0].banners" :key="image">
                            <img :src="image.cover" @click="toBookContent(image)" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="recommend" v-if="bookWomanInfo[1]">
                    <h3>{{ bookWomanInfo[1].name }}</h3>
                    <BookViewFirst v-for="book in bookWomanInfo[1].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="serials" v-if="bookWomanInfo[2]">
                    <h3>{{ bookWomanInfo[2].name }}</h3>
                    <BookViewFirst v-for="book in bookWomanInfo[2].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="fine-book" v-if="bookWomanInfo[3]">
                    <h3>{{ bookWomanInfo[3].name }}</h3>
                    <div class="find-book-list" v-if="bookWomanInfo[3].list.length == 3">
                        <HumanHotPage v-for="book, index in bookWomanInfo[3].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookContent(book)" />
                    </div>
                    <p @click="toShortCutNav('人气')">查看榜单 ></p>
                </div>
                <div class="finish-book" v-if="bookWomanInfo[4]">
                    <h3>{{ bookWomanInfo[4].name }}</h3>
                    <BookViewFirst v-for="book in bookWomanInfo[4].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="new-book" v-if="bookWomanInfo[5]">
                    <h3>{{ bookWomanInfo[5].name }}</h3>
                    <div class="new-book-list">
                        <BookViewSecond v-for="book in bookWomanInfo[5].list" :key="book.id" :book="book"
                            @click="toBookContent(book)" />
                    </div>
                </div>
                <div class="potential-book" v-if="bookWomanInfo[6]">
                    <h3>{{ bookWomanInfo[6].name }}</h3>
                    <div class="potential-book-list" v-if="bookWomanInfo[6].list.length == 4">
                        <BookViewSecond v-for="book in bookWomanInfo[6].list" :key="book.id" :book="book"
                            @click="toBookContent(book)" />
                    </div>
                    <div class="find-book-list" v-if="bookWomanInfo[3].list.length == 3">
                        <HumanHotPage v-for="book, index in bookWomanInfo[3].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookContent(book)" />
                    </div>
                </div>
                <div class="fine-book-girl" v-if="bookWomanInfo[7]">
                    <h3>{{ bookWomanInfo[7].name }}</h3>
                    <div class="find-book-girl-list">
                        <HumanHotPage v-for="book, index in bookWomanInfo[7].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookContent(book)" v-if="bookWomanInfo[7].list.length == 3" />
                    </div>
                    <BookViewFirst v-for="book in bookWomanInfo[7].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" v-if="bookWomanInfo[7].list.length > 3" />
                    <p @click="toShortCutNav('完结')">查看榜单 ></p>
                </div>
                <div class="modern-affective" v-if="bookWomanInfo[8]">
                    <h3>{{ bookWomanInfo[8].name }}</h3>
                    <ul class="list">
                        <BookViewForurth v-for="book, index in bookWomanInfo[8].list" :key="index" :bookinfo="book"
                            @click="toBookContent(book)" />
                    </ul>
                </div>
                <div class="ancient-affective" v-if="bookWomanInfo[9]">
                    <h3>{{ bookWomanInfo[9].name }}</h3>
                    <ul class="list">
                        <BookViewForurth v-for="book, index in bookWomanInfo[9].list" :key="index" :bookinfo="book"
                            @click="toBookContent(book)" />
                    </ul>
                </div>

                <div class="bottom">
                    <p>我是有底线的</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.woman {
    height: 100%;
    width: 100%;

    >.woman-content {
        .banner {
            width: 100%;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .recommend,
        .serials,
        .finish-book {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;

            h3 {
                margin-bottom: 10rem;
            }
        }

        .fine-book,
        .fine-book-girl {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;
            width: 100%;
            padding-bottom: 10rem;

            h3 {
                margin-bottom: 15rem;
            }

            .find-book-list,
            .find-book-girl-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            >p {
                text-align: center;
                font-size: 14rem;
                color: #888;
            }
        }

        .new-book,
        .potential-book {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;
            width: 100%;
            padding-bottom: 10rem;

            h3 {
                margin-bottom: 10rem;
            }

            .new-book-list,
            .potential-book-list,
            .find-book-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            ul.list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between
            }

        }

        .modern-affective,
        .ancient-affective {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;
            width: 100%;
            padding-bottom: 10rem;

            >h3 {
                margin-bottom: 10rem;
            }

            ul.list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between
            }
        }

        .bottom {
            text-align: center;

            p {
                font-size: 12rem;
                padding: 10rem;
            }
        }
    }

}
</style>
